<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <script src="../js/vue.js"></script>
    <script src="../js/echarts.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/echarts.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/jquery.min.js"></script>
    <!--引入ElementUI样式 -->

</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析<small>会员统计</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>会员统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</div>
<div class="app-container">
    <div class="box">
        <div id="chart1" style="height:600px;"></div>
    </div>
</div>
<script>

    var myChart1 = echarts.init(document.getElementById('chart1'));
    var itemStyle = {
        normal: {
        },
        emphasis: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
        }
    };

    function renderBrushed(params) {
        var brushed = [];
        var brushComponent = params.batch[0];

        for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex;
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
        }

        myChart.setOption({
            title: {
                backgroundColor: '#333',
                text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
                bottom: 0,
                right: 0,
                width: 100,
                textStyle: {
                    fontSize: 12,
                    color: '#fff'
                }
            }
        });
    }
    new Vue({
        el: '#app',
        created: function (){
            axios.get("/report/getMemberSexReport.do").then((res)=>{
                myChart1.setOption(
                    {
                        backgroundColor: '#FFFFFF',
                        legend: {
                            data: ['男','女'],
                            align: 'left',
                            left: 10
                        },
                        brush: {
                            toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                            xAxisIndex: 0
                        },
                        toolbox: {
                            feature: {
                                magicType: {
                                    type: ['stack', 'tiled']
                                },
                                dataView: {}
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            data: res.data.year,
                            name: '年龄',
                            silent: false,
                            axisLine: {onZero: true},
                            splitLine: {show: false},
                            splitArea: {show: false}
                        },
                        yAxis: {
                            inverse: true,
                            splitArea: {show: false}
                        },
                        grid: {
                            left: 100
                        },
                        visualMap: {
                            type: 'continuous',
                            dimension: 1,
                            text: ['High', 'Low'],
                            inverse: true,
                            itemHeight: 200,
                            calculable: true,
                            min: -2,
                            max: 6,
                            top: 60,
                            left: 10,
                            inRange: {
                                colorLightness: [0.4, 0.8]
                            },
                            outOfRange: {
                                color: '#bbb'
                            },
                            controller: {
                                inRange: {
                                    color: '#2f4554'
                                }
                            }
                        },
                        series: [
                            {
                                name: '男',
                                type: 'bar',
                                stack: 'one',
                                itemStyle: itemStyle,
                                data: res.data.man
                            },
                            {
                                name: '女',
                                type: 'bar',
                                stack: 'two',
                                itemStyle: itemStyle,
                                data: res.data.woman
                            },
                        ]
                    });
            });
        }
    })
</script>
</body>
</html>